<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }
    </style>
</head>
<body>
<div class="layuimini-main">
    <div class="layui-row layui-col-space15" style="padding-left: 30%">
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">今日玩家总收益</div>
                <div class="layui-card-body" style="height: 30px">
                    <div class="layui-row layui-col-space5" style="padding-left: 25%">
                        <div class="layui-col-xs9 layui-col-md9">
                            {$today}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">昨日玩家总收益</div>
                <div class="layui-card-body" style="height:30px">
                    <div class="layui-row layui-col-space5" style="padding-left: 25%">
                        <div class="layui-col-xs9 layui-col-md9 ">
                            {$yesterday}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md12">
            <fieldset class="table-search-fieldset">
                <form class="layui-form layui-form-pane" action="" style="margin-left: -5%">
                    <div class="layui-inline" style="margin-left: 10%">
                        <label class="layui-form-label">时间筛选</label>
                        <div class="layui-input-inline">
                            <input type="text" name="searchTime_min" id="searchTime_min" placeholder="起始日期" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="searchTime_max" id="searchTime_max" placeholder="结束日期" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </form>
                <div class="layui-col-xs12 layui-col-md6">
                    <div id="echarts-dataset" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
                <div class="layui-col-xs12 layui-col-md6">
                    <div id="Earnings_trend" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
            </fieldset>
        </div>
    </div>


</div>
<!--</div>-->
{include file="public/footer" /}
<script>
    layui.use(['layer', 'echarts', 'laydate', 'form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            laydate = layui.laydate,
            echarts = layui.echarts;
        /*时间-最小*/
        laydate.render({
            elem: '#searchTime_min',
            type: 'datetime',
            done(value, date) {
                $('#searchTime_min').val(value);
                submitInfo();
            }
        });
        /*时间-最大*/
        laydate.render({
            elem: '#searchTime_max',
            type: 'datetime',
            done(value, date) {
                $('#searchTime_max').val(value);
                submitInfo();
            }
        });

        // 监听搜索操作
        function submitInfo() {
            var searchTime_min = $('#searchTime_min').val();
            var searchTime_max = $('#searchTime_max').val();
            $data = getIncomeType(searchTime_min, searchTime_max);
            echartsLoad($data);
            return false;
        };
        /**
         * 收益类型统计
         */
        var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');
        var incomeTypeData = getIncomeType();
        echartsLoad(incomeTypeData);

        function echartsLoad(incomeTypeData) {
            var optionDataset = {
                title: {
                    text: '收益类型统计',
                    textStyle: {
                        color: 'red',
                    },
                    padding: [0, 0, 10, 100]  // 位置
                },
                legend: {
                    type: 'plain',  // 图列类型，默认为 'plain'
                    top: '1%',  // 图列相对容器的位置 top\bottom\left\right
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (incomeTypeData.incomeDataCount != 0) {
                            return params.name + "<br />" +
                                '数量：' + params.data + ' ' + "<br />" +
                                '占比：' + ((parseInt(params.data) / parseInt(incomeTypeData.incomeDataCount)) * 100).toFixed(2) + '%';
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        formatter : function(params,val){
                            let x = incomeTypeData.incomeData[val]
                            if(x==undefined || x=='undefined'){
                                x=0;
                            }
                            return params.replace('&middot;','.')+"\n\n数量:"+x+"\n占比:"+((parseInt(x) / parseInt(incomeTypeData.incomeDataCount)) * 100).toFixed(2) + '%';
                        }
                    },
                    data: ['推荐玩家', '联盟推荐', '经营收益', '市场收益', '平台奖励']
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        type: 'bar',
                        data: incomeTypeData.incomeData,
                    },
                ]
            };
            echartsDataset.setOption(optionDataset);
            echartsDataset.on('click', function (params) {


            });
        }

        function getIncomeType(min = '', max = '') {
            var incomeTypeData;
            $.ajax({
                url: '/admin/AssetData/playerIncome?action=ajax',
                type: 'post',
                dataType: 'json',
                async: false,
                data: {min: min, max: max},
                success: function (res) {
                    if (res.status == true) {
                        // 关闭弹出层
                        incomeTypeData = res.data;
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function () {
                    layer.msg("报错了");
                }
            });
            return incomeTypeData;

        }

        /*每日收益走势*/
        var Earnings_trend = echarts.init(document.getElementById('Earnings_trend'), 'walden');
        var option_Earnings_trend = {
            title: {
                text: '每日收益走势',
                textStyle: {
                    color: 'red',
                },
                padding: [0, 0, 10, 100]  // 位置
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            dataZoom: [{
                type: 'slider',
                startValue: "{$startTime}",
                endValue: "{$endTime}",
            }, {
                type: 'inside',
                startValue: "{$startTime}",
                endValue: "{$endTime}",
            }],
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: [{$dailyTime}]
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '收益',
                    type: 'line',
                    data: [{$dailyData}],
                },
            ]
        };
        Earnings_trend.setOption(option_Earnings_trend);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsDataset.resize();
            Earnings_trend.resize();
        }

    });
</script>
</body>
</html>
